<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书借阅管理系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="statics/fonts2/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="statics/css2/util.css">
    <link rel="stylesheet" type="text/css" href="statics/css2/main.css">
    <link rel="stylesheet" type="text/css" href="statics/css/verify.css">
	<link rel="Shortcut Icon" href="images/logo/logo.png" />
</head>
<body>
<div class="container">
    <div class="wrap-login">
        <div class="wrap-form-title" style="background-image: url(statics/images2/banner.jpg);">
            <span class="form-title">欢 迎</span>
        </div>
        <form id="from1" class="login-form validate-form" th:action="@{/login}" th:method="post">
            <!--            不为空才显示-->
            <span style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></span>
            <div class="wrap-input validate-input m-b-26" data-validate="用户名不能为空">
                <span class="label-input">用户名:</span>
                <input class="input" type="text" id="username" placeholder="请输入用户名">
                <span class="focus-input"></span>
            </div>

            <div class="wrap-input validate-input m-b-18" data-validate="密码不能为空">
                <span class="label-input">密&nbsp;&nbsp;&nbsp;码:</span>
                <input class="input" type="password" id="password" placeholder="请输入密码">
                <span class="focus-input"></span>
            </div>
            <div class="flex-sb-m w-full p-b-30" >
				
				<div class="tst-register"><a href="user/register2.html" class="txt1">没有账号？立即注册</a></div>
                <div class="contact-form-checkbox"></div>
                <div >
                    <a href="javascript:" class="txt1">忘记密码？</a>
                </div>
            </div>
            <div class="wrapper-form-btn">
                <button class="login-form-btn" id="btn" type="button">提 交</button>
            </div>
			<div id="mpanel2" style="margin-top:50px;">
			</div>


        </form>
    </div>
</div> 

<script src="statics/js2/jquery-3.2.1.min.js"></script>
<script src="statics/js2/main.js"></script>
<script src="statics/js2/crypto-js.js"></script>
<script src="statics/js2/ase.js"></script>
<script src="statics/js2/verify.js"></script>

<script>
    //var URL = 'http://localhost:8088';
    var URL = 'http://39.107.205.22:8088';
    $('#mpanel2').slideVerify({
        _this : this,
        baseUrl:URL,  //服务器请求地址, 默认地址为安吉服务器;
        mode:'pop',     //展示模式
        containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
        imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
            width: '400px',
            height: '200px',
        },
        barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
            width: '400px',
            height: '40px',
        },

        beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
            // var flag = true;
            // //实现: 参数合法性的判断逻辑, 返回一个boolean值
            // return flag
            var name =  document.getElementById("username").value
            var pass = document.getElementById("password").value
            if (name == '' || pass == '') {
                alert("请完整输入信息。")
                return false
            }
            return true

        },
        ready : function() {},  //加载完毕的回调
        success : function(params) { //成功的回调
            // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
            // 例如: login($.extend({}, params))
            var name =  document.getElementById("username").value
            var pass = document.getElementById("password").value
            var captchaVerification = this.secretKey ? aesEncrypt(this.token+'---'+JSON.stringify(this.checkPosArr),this.secretKey):this.token+'---'+JSON.stringify(this.checkPosArr)

            $.ajax({
                url: URL + "/user/login",
                type:"post",
                data:{"username":name,"password":pass,"captchaVerification":captchaVerification},
                dataType:"json",
                success:function(result){
                    if (result.code == '0'){
						
						window.sessionStorage.setItem("id",result.data.id)
						window.sessionStorage.setItem("name",result.data.name)

                        var role = result.data.role;//获取url返回的值
                        if (role == 1){
                            window.location.href ="book/index.html"
                        }else window.location.href ="book/index.html"
                    }else {
                        if(result.msg == '403'){
                            alert("用户未注册")
                        }else if (result.msg == '402'){
                            alert("用户名或密码错误")
                        }

                    }
                }
            }) },
        error : function() {}        //失败的回调
    });
</script>


</body>
</html>
